
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            width: 560px;
            height: 312px;
            background-color: rgb(249, 247, 248);
            border: 1px solid rgb(222, 222, 222);
            margin-left: 10px;
            margin-top: 10px;
        }

        .left {
            width: 456px;
            float: left;
        }

        .left img {
            width: 440px;
            height: 293px;
            margin-left: 8px;
            margin-top: 8px;
        }

        .right {
            height: 293px;
            margin-left: 8px;
            margin-top: 8px;
        }

        .right img {
            width: 95px;
            height: 62px;
            margin-top: 8px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left"><img src="images/1.jpg" /></div>
        <div class="right">
            <img src="images/1.jpg" />
            <img src="images/2.jpg" />
            <img src="images/3.jpg" />
            <img src="images/4.jpg" />
        </div>
    </div>
</body>
<script>
    // 1、自动切换 图片
    // 2、鼠标移入右侧的图片 左边切换到对应的图片  鼠标移出  以当前的图片 自动继续切换图片
    // 3、当前显示的小图片 透明度为1  其他没有显示的保证透明度为0.5
    // 全局变量保存当前显示的图片
    var index = 0;
    // 保存定时器标识
    var timer;
    var leftImg = document.querySelector('.left>img');
    var rightSmallImg = document.querySelectorAll('.right>img');
    changeOpacity();
    play();
    // 实现自动切换图片
    function play(){
        timer = setInterval(function(){
            index++;
            // index最大值只能为3 一旦最后一张图片 下一张就是第一张图片
            if(index>3){
                index =0;
            }
            // 设置左边图片地址
            leftImg.src = rightSmallImg[index].src;
            // 控制透明度  除了当前显示的图片透明度为1 其他的都是0.5
            // rightSmallImg.forEach(function(imgDom){
            //     imgDom.style.opacity = 0.5;
            // })
            // rightSmallImg[index].style.opacity = 1;
            // 等价于 上面的写法
            changeOpacity();
        },1000);
    }

    function changeOpacity(){
        rightSmallImg.forEach(function(imgDom,i){
            // 每次循环 i表示的是下标 index 也是下标 并且正好对应上
            imgDom.style.opacity = index == i?1:0.5;
        })
    }


    rightSmallImg.forEach(function(dom,i){
        dom.addEventListener('mouseover',function(){
            // 清除定时器
            clearInterval(timer);
            // 设置左侧显示的是当前图片
            leftImg.src = this.src;
            // 修改index的记录值
            index = i;
            // 修改透明度
            changeOpacity();
        })
        dom.addEventListener('mouseout',play)
    })
</script>